<template>
  <div>
    <div class="title-row">
      <span class="title-row-bar" />
      表级热备总量(当天)
      <!-- <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        style="margin-left: 20px"
        @change="changeDatePicker"
      /> -->
    </div>

    <div class="panel-group">
      <div
        class="card-panel total"
        @click="
          $router.push({
            path: '/logAnalysis/source',
            query: { taskStateTable: '' },
          })
        "
      >
        <div class="card-panel-description">
          <div class="card-panel-text">总记录数</div>
          <count-to
            :start-val="0"
            :end-val="totalNum"
            :duration="2600"
            class="card-panel-num"
          />
        </div>
      </div>
      <div
        class="card-panel green"
        @click="
          $router.push({
            path: '/logAnalysis/source',
            query: { taskStateTable: '成功' },
          })
        "
      >
        <div class="card-panel-description">
          <div class="card-panel-text">成功</div>
          <count-to
            :start-val="0"
            :end-val="successNum"
            :duration="2600"
            class="card-panel-num"
          />
        </div>
      </div>
      <!-- <div
        class="card-panel orange"
        @click="
          $router.push({
            path: '/logAnalysis/source',
            query: { taskStateTable: '待执行' },
          })
        "
      >
        <div class="card-panel-description">
          <div class="card-panel-text">待执行</div>
          <count-to
            :start-val="0"
            :end-val="waitNum"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div> -->
      <div
        class="card-panel "
        @click="
          $router.push({
            path: '/logAnalysis/source',
            query: { taskStateTable: '进行中' },
          })
        "
      >
        <div class="card-panel-description">
          <div class="card-panel-text">进行中</div>
          <count-to
            :start-val="0"
            :end-val="goingNum"
            :duration="3200"
            class="card-panel-num"
          />
        </div>
      </div>
      <div
        class="card-panel red"
        @click="
          $router.push({
            path: '/logAnalysis/source',
            query: { taskStateTable: '失败' },
          })
        "
      >
        <div class="card-panel-description">
          <div class="card-panel-text">失败</div>
          <count-to
            :start-val="0"
            :end-val="failNum"
            :duration="3200"
            class="card-panel-num"
          />
        </div>
      </div>
    </div>

    <!-- Charts -->
    <div
      id="allHotStandby"
      style="width: 100%; height: 300px"
    />
  </div>
</template>

<script>
import '@/assets/styles/chartPanel.scss'
import chartApi from '@/api/dashboard/charts'
import CountTo from 'vue-count-to'
import echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      value1: [],
      successNum: 0,
      waitNum: 0,
      goingNum: 0,
      failNum: 0,
      totalNum: 0
    }
  },
  async mounted() {
    await this.getData()
    this.allHotStandbyChart()
    // this.changeDatePicker()
  },
  methods: {
    async getData() {
      const res = await chartApi.getTableStateAllNum()
      this.totalNum = res.total
      for (const state in res) {
        if (state === 'completed') {
          this.successNum = res[state]
        } else if (state === 'fail') {
          this.failNum = res[state]
        } else if (state === 'toBeExecuted') {
          this.waitNum = res[state]
        } else if (state === 'inProgress') {
          this.goingNum = res[state]
        }
      }
    },
    changeDatePicker() {
      var data = {
        staTime: this.value1[0],
        endTime: this.value1[1]
      }
      console.log(data)
      // requestData
      //   .hotBackupTotal(data)
      //   .then((data) => {
      //     console.log(data)
      //     if (data.已热备) {
      //       this.hotStandbyedNum = data.已热备
      //     } else {
      //       this.hotStandbyedNum = 0
      //     }
      //     if (data.待热备) {
      //       this.hotStandbyWaitNum = data.待热备
      //     } else {
      //       this.hotStandbyWaitNum = 0
      //     }
      //     if (data.热备中) {
      //       this.hotStandbyingNum = data.热备中
      //     } else {
      //       this.hotStandbyingNum = 0
      //     }
      //     if (data.失败) {
      //       this.failNum = data.失败
      //     } else {
      //       this.failNum = 0
      //     }
      //     if (data.总记录数) {
      //       this.hotStandbyedTotalNum = data.总记录数
      //     } else {
      //       this.hotStandbyedTotalNum = 0
      //     }
      //     this.allHotStandbyChart()
      //   })
      //   .catch(() => { })
    },
    allHotStandbyChart() {
      var myChart = echarts.init(document.getElementById('allHotStandby'))

      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '0',
          data: ['成功', '进行中', '失败']
        },
        calculable: true,
        series: [
          {
            name: '热备数据总量',
            type: 'pie',
            center: ['50%', '50%'],
            data: [
              {
                value: this.successNum,
                name: '成功',
                itemStyle: { color: '#67C23A' }
              },
              {
                value: this.failNum,
                name: '失败',
                itemStyle: { color: '#F56C6C' }
              },
              {
                value: this.goingNum,
                name: '进行中',
                itemStyle: { color: '#3F9EFF' }
              }
              // {
              //   value: this.waitNum,
              //   name: '待执行',
              //   itemStyle: { color: '#E6A23C' }
              // },
             
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
      const erd = elementResizeDetectorMaker()
      erd.listenTo(document.getElementById('allHotStandby'), (element) => {
        myChart.resize()
      })
    }
  }
}
</script>
